<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <!-- Css -->
    <link href="{{ mix('home/css/app.css') }}" rel="stylesheet">
    <!-- Scripts -->
    <script src="{{ mix('home/js/app.js') }}" defer></script>
</head>
<style>
    header {height: 70px;}
    canvas { width: 100%;height: auto; position: fixed;opacity: 0.5; }

    footer{width: 100%;height: 160px }
</style>

<body class="">
<canvas id="canvas"></canvas>
<div id="app">
        <header class="wrapper">
        {{--头部导航--}}
            <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
                <div class="container">
                    <a class="navbar-brand" href="#">Ghost Ai</a>
                    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>

                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav nav-pills mr-auto">
                            <li class="nav-item  active ">
                                <a class="nav-link  " href="{{route ('index')}}">首页</a>
                            </li>
                            @foreach($NavMenuList as $item=>$value)
                                <li class="nav-item ">
                                    <a class="nav-link " href="{{route ('category',['id'=>$value['id']])}}">{{$value['name']}}</a>
                                </li>
                            @endforeach
                        </ul>
                        <div class="my-2 my-lg-0">
                            @guest
                                <a href="#" class="text-decoration-none text-white" data-toggle="modal" data-target="#LoginModal">登陆</a>
                            @else
                                <div class="dropdown">
                                    <img src="{{ auth()->user()->avatar }}" style="width: 35px ; height: 35px" class="img-fluid img-thumbnail img-bordered">
                                </div>
                            @endguest
                        </div>
                    </div>
                </div>
            </nav>
        </header>


        {{--Main--}}

        <div class="container">


            <div class="row">
                <div class="col-md-8" role="main" >
                    @yield('content')
                </div>
                <div class="col-md-4 " role="complementary" >
                    <div class="card">
                        <div class="card-header">
                            搜索
                        </div>
                        <div class="card-body" >
                            <form class="form-inline my-2 my-lg-0"  method="get" action="{{route ('search')}}">
                                <input class="form-control col-md-10" name="search"  type="search" placeholder="Search" aria-label="Search">
                                <button class="btn btn-outline-success my-2 my-sm-0 col-md-2" type="submit"><i class="fa fa-search"></i></button>
                            </form>
                        </div>
                    </div>

                    <div class="card my-lg-3">
                        <div class="card-header">
                            推荐
                        </div>
                        <div class="card-body">
                            <ul class="list-group">

                                @foreach($top as $v)
                                    <li class="list-group-item"><a href="{{route('details',['id'=>$v['id']])}}">{{$v['title']}}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="card my-lg-3">
                        <div class="card-header">
                            标签
                        </div>
                        <div class="card-body">
                            <div>
                                @foreach($label as $v)
                                    <label class="badge badge-info text-white" style="background-color: {{$v['color']}}">{{$v['name']}} ( {{ $v['num'] }} )</label>
                                @endforeach

                            </div>

                        </div>
                    </div>
{{--                    <div class="card my-lg-3">--}}
{{--                        <div class="card-header">--}}
{{--                            友情链接--}}
{{--                        </div>--}}
{{--                        <div class="card-body">--}}
{{--                            <ul class="list-group">--}}
{{--                                <li class="list-group-item">Cras justo odio</li>--}}
{{--                            </ul>--}}
{{--                        </div>--}}
{{--                    </div>--}}
                </div>
            </div>

        </div>

        {{--底部--}}

        <footer class="navbar clearfix fixed-bottom navbar-dark bg-dark text-white">


            <div class="container">
                <div class="float-left">
                    <dl class="">
                        <dd>许可协议：<a rel="nofollow" href="https://creativecommons.org/licenses/by-nc/4.0/deed.zh">CC BY-NC 4.0</a></dd>
                        <dd>版权所有：© 2014-2019 ghost-ai.com</dd>
                    </dl>
                </div>
                <div class="float-right">
                    <dl class="">
                        <dd>联系邮箱：<a href="mailto:ghost@ghost-ai.com">ghost@ghost-ai.com</a></dd>
                        <dd>ICP 备案：皖ICP备17004047号-1</dd>
                    </dl>
                </div>
            </div>
        </footer>


        <div class="modal fade" id="LoginModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header text-center font-weight-bold">注册登陆</div>
                    <div class="modal-body">

                        <div class="text-center">
                            <a href="{{route('oauth.github')}}">
                                <svg class="octicon octicon-mark-github v-align-middle" height="50" viewBox="0 0 16 16" version="1.1" width="50" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    // scrollTop(0);
</script>
</html>
